import styled from "styled-components";

const OwnStyle = styled.div`
  position: relative;

  .user_content {
    width: 100%;
    position: absolute;
    top: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 60vh;
  }

  .own_header {
    height: 180px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
  }

  .user_info {
    flex: 3;
    position: relative;
    width: 80%;
    height: 100px;
    background-color: white;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    padding: 0 15px;
    min-height: 20vw;
    .avater {
      width: 60px;
      height: 60px;
      overflow: hidden;
      border-radius: 50%;
      margin-right: 30px;

      .adm-image {
        width: 100%;
        height: 100%;
      }
    }

    .name {
      font-size: 16px;
      font-weight: 600;
    }

    .goToEdit {
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: var(--themeColor2);
    }
  }

  .outLogin {
    flex: 1;

    .adm-button {
      background-color: var(--themeColor1);
      color: white;
    }
  }

  .userCpm {
    flex: 6;
    width: 80%;
    margin-top: 5vh;

    .item {
      display: flex;
      justify-content: space-between;

      svg {
        color: var(--themeColor1);
      }
    }
  }
`;

export default OwnStyle;
